<!-- /pages/topScores/topScores.vue -->
<template>
	<view class="top-scores-container">
		<view class="top-scores">
			<text class="title">排行榜 Top 10</text>
			<view v-for="(item, index) in topScores" :key="index" class="score-item" style="margin-left: 15%;">
				<text>{{ index + 1 }}. {{ item.username }} ： {{ item.score }} 分</text>
				<image :src="item.userimg" style="width: 50px; height: 50px; border-radius: 50%;margin-left: 15px;"></image>
				<!-- 显示用户头像 -->
			</view>
			<button class="button" @tap="goBack">关闭</button>
		</view>
	</view>
</template>
<script>
	import config from '@/config.js';
	export default {
		data() {
			return {
				topScores: []
			}
		},
		onLoad() {
			this.loadTopScores()
		},
		methods: {
			async loadTopScores() {
				try {
					const res = await uni.request({
						url: `${config.BASE_URL}/top_scores`,
						method: 'GET'
					});

					if (res.statusCode !== 200) {
						console.error('请求失败，状态码:', res.statusCode);
						uni.showToast({
							title: '获取排行榜失败',
							icon: 'none'
						});
						return;
					}

					// 确认响应数据结构是否符合预期
					console.log('从服务器获取的数据:', res.data);
					this.topScores = res.data;

				} catch (exception) {
					console.error('处理请求结果时发生异常:', exception);
					// 如果有更详细的错误信息，可以在这里打印出来
					if (exception.response) {
						console.error('服务器响应:', exception.response.data);
						console.error('状态码:', exception.response.status);
						console.error('响应头:', exception.response.headers);
					} else {
						console.error('请求错误:', exception.message);
					}
					uni.showToast({
						title: '获取排行榜失败',
						icon: 'none'
					});
				}
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>


<style scoped>
	.top-scores-container {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
		/* 设置背景图片 */
		background-image: url('http://sr5go4oo1.hn-bkt.clouddn.com/staitc/match.png');
		background-size: 450px;
		/* 确保背景图片覆盖整个容器 */
		background-position: center;
		/* 让背景图片居中显示 */
		height: 100vh;
		/* 确保整个视图高度都有背景图片 */
	}

	.top-scores {
		width: 80vw;
		box-sizing: border-box;
		text-align: center;
		padding: 20px;
		border-radius: 15px;
		/* 设置圆角大小 */
		background-color: rgba(30, 30, 54, 0.5);
		/* 半透明白色背景，可根据需要调整透明度 */
		backdrop-filter: blur(10px);
		/* 磨砂效果，模糊半径可根据需要调整 */
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		/* 可选：添加一些阴影增加层次感 */
		margin: auto;
		/* 居中显示 */
		justify-content: center;
	}

	.title,
	.score-item {
		box-sizing: border-box;
	}
	

	.button {
		margin-top: 20px;
		width: 80%;
		max-width: 300px;
		height: 40px;
		background-color: #6464be;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.score-item {
		width: 100%;
		box-sizing: border-box;
		margin-top: 20px;
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
	}

	.score-item image {
		margin-right: 10px;
		/* 在头像和文本之间添加一些间距 */
	}
</style>